<template>
  <!--贵宾卡页面-->
  <div>
    <div class="search">
      <input type="text" placeholder="贵宾卡名称/关键字" v-model="goodsName">
      <img src="../../assets/search.png" alt="" width="16"  @click="goSearch(goodsName)">
    </div>
    <ul class="tuijianlist">
      <li v-for="item in goodsList" @click="goGoodsDetail(item.goodsId)">
        <img :src="item.coverImg | imgPathFilter" alt="" width="100%" height="170px"  style="object-fit:cover">
        <div>
          <p>{{item.goodsName | goodsNameTextNumFilter}}</p>
          <p>{{item.goodsPrice}}元</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getGoodsList} from '../../../test/unit/http'
  import global from '../../../test/unit/global'
  import {wxApi} from '../../../test/unit/flyme_weixin'
  import {Toast} from 'we-vue'
  export default {
    name: 'guibinka',
    props: {},
    data() {
      return {
        goodsList: [],
        goodsName: ''
      };
    },
    methods: {
      goGoodsDetail(goodsId){
        this.$router.push({path: 'jinkadetail',query:{goodsId:goodsId}})
      },
      getGoodsListData(params){
        let that = this;
        getGoodsList(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            that.goodsList = res.object.goodsList;
          } else {
            Toast.fail(res.info);
          }
        })
      },
      goSearch(goodsName){
        let categoryId = this.$route.query.categoryId;
        let params = {categoryId: categoryId, goodsName: goodsName};
        this.getGoodsListData(params);
      }
    },
    created() {
      let categoryId = this.$route.query.categoryId;
      this.getGoodsListData({categoryId: categoryId});
      let url = window.location.href;
      let shareUrl = this.$myUtils.initShareUrl(url);
      let that = this;
      wxApi.init(function () {
        wxApi.updateAppMessageShareData("我的特权", "我的特权", shareUrl, global.ImgBaseURL + '/' + that.goods.coverImg)
      });
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  input::-webkit-input-placeholder {
    color: #999;
    font-size: 14px;
  }

  .search {
    position: relative;
    width: 95%;
    margin: 10px auto;
    input {
      width: 90%;
      border: 1px solid #eee;
      box-shadow: 0 3px 4px rgba(17, 17, 17, 0.05);
      border-radius: 7px;
      height: 25px;
      line-height: 25px;
      padding: 10px;
      color: #111;
    }

    img {
      position: absolute;
      right: 20px;
      top: 16px;
    }
  }

  .tuijianlist{
    text-align: left;
    padding: 10px 0 50px 10px;
    li{
      display: inline-block;
      width: calc(50% - 13px);
      font-size: 0;
      margin-bottom: 13px;
      margin-right: 10px;
      img{
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        height: 114px;
      }
      div{
        border:1px solid #eee;
        border-top:none;
        box-shadow: 0px 5px 15px -9px rgba(0,0,0,0.5);
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        text-align: left;
        padding: 10px;
        p:first-child{
          font-size: 15px;
          color: #333;
        }
        p:last-child{
          font-size: 17px;
          color: #ff7f00;
        }
      }

    }
  }
</style>
